<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 1200px;
        height: 800px;
        margin: 50px;
        border-radius: 10px;
        background-color: black;
        position: relative;
      }
      #wrapleft,
      #wrapright {
        width: 300px;
        height: 600px;
        border-radius: 50px;
        padding: 50px;
        text-align: center;
        line-height: 100px;
        background-color: gray;
        font-size: 30px;
        color: white;
      }
      #wrapleft {
        position: absolute;
        left: 20px;
        top: 20px;
      }
      #wrapright {
        position: absolute;
        right: 20px;
        top: 20px;
      }
      #btn-1,
      #btn-2 {
        width: 200px;
        height: 50px;
        color: black;
        position: absolute;
        left: calc(50% - 100px);
        background-color: rgb(196, 255, 213);
        font-size: 20px;
      }
      #btn-1 {
        top: 40%;
      }
      #btn-2 {
        bottom: 40%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div id="wrapleft"></div>
      <button id="btn-1">向右导入</button>
      <button id="btn-2">向左导入</button>
      <div id="wrapright"></div>
    </div>
    <script>
      //封装获取id
      function $(str) {
        return document.getElementById(str);
      }
      //虚拟数据
      var data =
        "故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空伐其身行，行弗乱其所为，所以动心忍性，曾益其所不能";
      //把虚拟数据赋值给左侧容器
      $("wrapleft").innerHTML = data;
      //初始值
      var n = 0;
      //点击一次把左侧容器内的字符串赋值给右侧
      $("btn-1").onclick = function () {
        n++;
        if (n > data.length) {
          n = 0;
        } else {
          $("wrapleft").innerHTML = data.substring(n, data.length);
          $("wrapright").innerHTML = data.substring(0, n);
        }
      };
      $("btn-2").onclick = function () {
        n++;
        if (n > data.length) {
          n = 0;
        } else {
          $("wrapright").innerHTML = data.substring(n, data.length);
          $("wrapleft").innerHTML = data.substring(0, n);
        }
      };

      
    </script>
  </body>
</html>
